<template>
	<view class="my-page-color">
		<van-tabs line-width="20"  :active="tagIndex" @click="changeTab" color="#FFCE20" >
		  <van-tab v-for="(item, index) in tabList" :title="item.title"  :key="index" ></van-tab>
		</van-tabs>
		<view v-if="userInfo.role == 2">
			<view class="filter-order-con">
				<view @click="visible = true" class="filter-order">
					<van-icon class="ml10" name="filter-o" />
					筛选
				</view>
				<picker :class="{'color-orange': searchData.status !== ''}" range-key="label" @change="changeStatus"
 					:value="sortIndex" :range="orderStatusObj">
					<span>{{statusList[searchData.status] || '订单状态'}}</span>
					<view :class="{'border-top-color': statusList[searchData.status]}" class="triangle-down"></view>
				</picker>
				<!-- <view v-if="searchData.status == 9" >订单状态：{{statusList[searchData.status]}}</view> -->
				
			</view>
			
			<view v-if="current &&(startDate || endDate)" class="flex-between filter-date-con">
				<view class="filter-date">
					<span class="mr10">{{current|showName}}</span>
					<span>{{startDate}}</span>
					<span class="grey-tips">至</span>
					<span>{{endDate}}</span>
				</view>
				<view @click="clearSeacher" class="filter-btn grey-tips">清除筛选</view>
			</view>
		</view>
		
		<view v-if="orderList.length > 0">
			
		<view @click="goPage(item)" v-for="(item, index) in orderList" :key="index" class="order-item">
			<view class="my-page-center flex-between order-tips">
				<span>订单编号{{item.order_number}}</span>
				<span>{{statusList[item.order_status]}}</span>
			</view>
		<view class="my-page-center">
			<view class="order-item-content">
				<view class="my-m-title oellipsis mb15"> {{item.snapshot.info.name}}</view>
				<view class="mb15">{{item.snapshot.info.rooms[0].name}}</view>
				<view class="justify-start">
					<view class="cover-con">
						<van-image
						 width="239rpx"
						 height="148rpx"
						 fit="cover"
						 :src="item.snapshot.info.rooms[0].image_urls[0]"
						>
						</van-image>		
					</view>
					<view class="step-con">
						<view class="step-item"><span class="dot"></span> 入住 {{item.start_date}}后  </view>
						<view class="line"></view>
						<view class="step-item mb15"><span class="dot dot2"></span>  退房 {{item.end_date}}前  </view>
					     <view class="tag-color-white">共{{item.rent_days}}晚</view>
					</view>
					</view>
					
					
					<view v-if="userInfo.role == 2" class="user-info">
						<view class="user-img">
							<van-image
							  width="100%"
							  height="100%"
							  fit="cover"
							  :src="item.tenant.avatar_url"
							/>
						</view>
						<view>{{item.tenant.nickname}}</view>
						<view class="grey-tips num">{{item.adults}}成人{{item.kids}}儿童 </view>
				</view>
				<van-divider	 :margin="20" />
				<view class="money-con">
					<span class="mr10">{{item.fee_s > 0?'已付款':'应付款'}}</span>
					<span class="color-red">{{$formatNumber(item.fee_s) || $formatNumber(item.fee - item.discount)}}加元</span>
				</view>
			</view>
		</view>
		</view>
		</view>
		<blank tips="暂无信息" v-if="orderList.length === 0"></blank>
		
		<van-popup
		  :show="visible" 
		   close-icon-position="top-left"
		   @close="closeVisble"
		  class="login-confirm" 
		  round
		  position="bottom"
		  custom-style="padding: 20rpx 35rpx 41rpx;" >
		  <view>
			  <view class="my-s-title flex-center">日期筛选</view>
			  <radio-group @change="radioChange">
			  <view class="flex-between mb20">
				  <view>
						<radio style="transform:scale(0.7)" color="#FFCE20" value="created_at" :checked="'created_at' === current" />
						 下单日期
				  </view>
				  <view>
						<radio style="transform:scale(0.7)" color="#FFCE20" value="start_at" :checked="'start_at' === current" />
						 入住日期
				  </view>
				  <view>
						<radio style="transform:scale(0.7)" color="#FFCE20" value="end_at" :checked="'end_at' === current" />
						 退房日期
				  </view>
		     </view>
			 </radio-group>
			 <view class="flex-between mb20">
				 <view @click="selectDate = 'startDate'" :class="{'current-date-con': selectDate == 'startDate'}" class="date-con ">{{startDate}}</view>
				 <view class="hyphen">-</view>
				 <view  @click="selectDate = 'endDate'" :class="{'current-date-con': selectDate == 'endDate'}" class="date-con">{{endDate}}</view>
			 </view>
			
			 <picker-view  :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
			
			
			
		  </view>
		  <footBtn @nextStep="nextStep"  @cancel="cancel"    btnText="确 定" :type="2">
		  </footBtn>
		  
		</van-popup>
		
	</view>
</template>

<script>
	import footBtn from '@/components/myBtn/footBtn.vue'
	import blank from '@/components/blank/index.vue'
	export default {
		components:{
			blank,
			footBtn
			// integral
		},
		data() {
			return {
				pageData: '',
				userInfo: '',
				tabList: [
					{
						title: '全部',
						status: ''
					},
					{
						title: '待确认',
						status: 0
					},
					{
						title: '待支付',
						status: 1
					},
					{
						title: '待入住',
						status: 2
					},
				],
				tagIndex: 0,
				orderList: [],
				// 订单状态 0:  1: 已确认（待支付） 2: 已支付 3: 已取消 4: 4: 取消订单待退款 5: 已退款 6: 已完成  7: 押金退还中
				statusList: ['待确认', '待支付', '待入住', '订单已取消', '待退款', '订单已取消', '已结束', '退还押金中', '订单取消待退款', '入住中', '已退房'],
				visible: false,
				days: [],
				months: [],
				years: [],
				indicatorStyle: `height: 50px;`,
				value: [],
				current: '',
				startDate: '',
				endDate: '',
				selectDate: 'startDate',
				searchData: {
					limit: 10000,
					page: 1,
					status: '',
					// created_at: [1,2,3],
					// start_at: [],
					// end_at: []
				},
				orderStatusObj: [
					 {
					    label: "待确认",
					    value: 0,
					  },
					  {
					    label: "待支付",
					    value: 1,
					  },
					  {
					    label: "已取消",
					    value: 3,
					  },
					  {
					    label: "待入住",
					    value: 2,
					  },
					  {
					    label: "入住中",
					    value: 9,
					  },
					
					  {
					    label: "已退房",
					    value: 10,
					  },
					
					  {
					    label: "押金待退款",
					    value: 7,
					  },
					  {
					    label: "订单取消待退款",
					    value: 4,
					  },
					  {
					    label: "退款失败",
					    value: 8,
					  },
					  {
					    label: "已结束",
					    value: 6,
					  },
				],
				sortIndex: ''
				
				
			}
		},
		onLoad(option) {
			this.pageData = option;
		},
		mounted() {
			this.init();
			// 获取用户信息
		},
		 filters: {
			 showName(name) {
				 if(name == 'created_at') {
					 return '下单日期'
				 }else if(name == 'start_at') {
					 return '入住日期'
				 }else if(name == 'end_at') {
					 return '退房日期'
				 }
			 },
		 },
		methods: {
			init() {
				if(this.pageData.dateType) {
					this.current = this.pageData.dateType;
					this.startDate = this.pageData.startDate;
					this.endDate = this.pageData.endDate;
					this.searchData[this.current + '[0]'] = this.startDate;
					this.searchData[this.current + '[1]'] = this.endDate;
					this.searchData.status =  this.pageData.status || '';
				}
				this.userInfo = this.$getStorage('userInfo');
				this.getDateList();
				this.getOrderStatus();
				
			},
			getOrderStatus() {
				this.$http.getOrderStatus().then(res => {
					this.tabList = [{
						title: '全部',
						status: ''
					}];
					this.searchData.status = this.pageData.status || '';
					res.map((item, index) =>{
						 item.title = this.statusList[item.status];
						 if(item.total && item.status !=2) {
							  item.title = item.title + item.total;
						 }
						 if((this.pageData.status || this.pageData.status ==='0') && Number(this.pageData.status) === item.status ) {
							 this.tagIndex = index + 1;
						
						 }
					});
					this.tabList.push(...res);
					this.tagIndex && (this.searchData.status = this.tabList[this.tagIndex].status);
					this.getOrderList();
				})
			},
			getOrderList() {
				let name = 'getTenantOrder';
				if(this.userInfo.role == 2) {
					 name = 'getLandlordOrder'
					 
				} 
				this.$http[name](this.searchData).then(res => {
				   this.orderList  = res.data;
				})
			 },
			 changeStatus(e) {
			 	// this.sortIndex = e.detail.value;
				this.searchData.status = this.orderStatusObj[e.detail.value].value ;
				if( e.detail.value  > 2) {
					this.tagIndex = 0;
				} else {
					this.tagIndex = Number(this.searchData.status) + 1;
				}
			 	this.getOrderList();
			 
			 },
			
			 getDateList() {
				  const date = new Date()
				  const years = []
				  const year = date.getFullYear()
				  const months = []
				  const month = date.getMonth() + 1
				  const days = []
				  const day = date.getDate()
				 for (let i = 2023; i <= date.getFullYear(); i++) {
					 years.push(i)
				 }
				 for (let i = 1; i <= 12; i++) {
					 let tamp = i < 10? '0' + i:i
					 months.push(tamp)
				 }
				 for (let i = 1; i <= 31; i++) {
					 let tamp = i < 10? '0' + i:i
					 days.push(tamp)
				 }
				 this.years = years;
				 this.months = months;
				 this.days = days;
				 this.value = [1, month - 1, day - 1];
			 },
			 radioChange(e) {
				 const value = e.detail.value;
				 this.current = value;
			 },
			 closeVisble() {
				 this.visible = false;
			 },
			 changeTab(data) {
			 	this.tagIndex = data.detail.index;
				this.searchData.status = this.tabList[this.tagIndex].status ;
				this.getOrderList();
			 },
			 goPage(data) {
				 this.$goPage(1,  '/subOrder/orderDetail?orderNumber=' + data.order_number);
			 },
			bindChange(e) {
				 const val = e.detail.value;
				 let timeString = this.years[val[0]] + '-' + this.months[val[1]] + '-' +this.days[val[2]]
				 if(this.selectDate== 'startDate') {
					 this.startDate = timeString;
				 }else {
					 this.endDate = timeString;
				 }
				
			},
			nextStep() {
				if(!this.current) {
					this.$toast('请选择筛选日期类型');
					return;
				}
				if(!this.startDate && !this.endDate) {
					this.$toast('请选择日期');
					return;
				}
				this.searchData = {
					limit: 10000,
					page: 1,
					status: this.tagIndex,
					// created_at: [],
					// start_at: [],
					// end_at: []
				};
				this.searchData[this.current + '[0]'] = this.startDate;
				this.searchData[this.current + '[1]'] = this.endDate; 
				this.visible = false;
				this.getOrderList();
			},
			clearSeacher() {
				this.searchData = {
					limit: 10000,
					page: 1,
					status: ''
					// created_at: [],
					// start_at: [],
					// end_at: []
				};
				this.cancel();
				this.getOrderList();
			},
			cancel() {
				this.selectDate = 'startDate';
				this.current = '';
				this.startDate = '';
				this.endDate = '';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filter-order-con{
		display: flex;
		align-items: center;
	}
	.filter-date-con {
		padding: 0 30rpx 20rpx 30rpx;
		font-size: 27rpx;
		.grey-tips {
			margin: 0 10rpx;
		}
	}
	.filter-order {
		padding: 10rpx 36rpx 10rpx 30rpx;
		background: #FFFFFF;
		border-radius: 60rpx;
		font-size: 27rpx;
		color: #999999;
		margin:25rpx 40rpx;
		display: inline-block;
	}
	.order-tips {
		height: 85rpx;
		line-height: 85rpx;
		background: #FFFAE1;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		font-size: 25rpx;
	}
	.order-item {
		margin-bottom: 15rpx;
		.my-m-title {
			margin: 0 auto;
			padding: 20rpx 0;
			
		}
	}
	.order-item-content {
		color: #444;
		.cover-con {
			width:239rpx;
			height: 148rpx;
			border-radius: 12rpx;
			overflow: hidden;
			margin-right: 40rpx;
		}
		.step-con {
			// padding: 40rpx 0  0 0;
		}
		.step-item {
			font-size: 29rpx;
			color: #444444;
			text-indent: 20rpx ;
			height: 26rpx;
			line-height: 26rpx;
			display: flex;
			align-items: center;
			.dot {
				width: 15rpx;
				height: 15rpx;
				background: #52C681;
				border-radius: 50%;
				display: inline-block;
				margin-right: 10rpx;
				vertical-align:  middle;
			}
			.dot2 {
			  background: #E33838;
			}
		
		}
		.line {
			width: 15rpx;
			height: 30rpx;
			position: relative; 
			left: 0;
			top:0;
		}
		.line::before {
			content: '';
			width: 4rpx;
			height: 40rpx;
			position: absolute;
			top:50%;
			left:50%;
			transform: translate(-50%,-50%);
			background-color: #D8D8D8;
		}
		
	}
	.user-info {
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 25rpx;
		color: #222222;
		margin-top: 20rpx;
			
		.user-img {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
			border-radius: 50%;
			overflow: hidden;
		}
		.num {
			margin-left: 10rpx;
			font-size: 22rpx;
			// padding-bottom:20rpx ;
		}
	}
	.money-con {
		width: 100%;
		// height: 40rpx;
		// line-height: 40rpx;
		padding-bottom: 26rpx;
		text-align: right;
		font-size: 29rpx;
	}
	.date-con {
		width: 271rpx;
		height: 79rpx;
		background: #F6F6F6;
		border-radius: 60rpx;
		font-size: 29rpx;
		color: #222222;
		text-align: center;
		line-height: 79rpx;
	}
	.current-date-con {
		background: #FFF9F1;
		border: 2rpx solid #EC8403;
	}
	.hyphen {
		margin: 0 20rpx;
	}
	
	.picker-view {
		width: 750rpx;
		height: 500rpx;
		margin-top: 20rpx;
		.item {
			line-height: 100rpx;
			text-align: center;
		}
	}
		
</style>